<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>UsersInfo</title>
    <!--新Bootstrap4核心CSS文件-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!--bootstrap .bundle.minjs用于弹窗 、提示、下拉菜单，包含了popper.min.js-->
    <script src= "https:/cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <!--最新的Bootstrap4核心JavaScript文件-->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--Jq文件-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
      <div id="modifyUser">
          <form name="modifyUser">
              <div class="form-group">
                  <label for="id">ID:</label>
                  <input type="text" class="form-control" name="id" id="id" th:value="${user.id}" disabled>
              </div>
              <div class="form-group">
                  <label for="name">name:</label>
                  <input type="text" class="form-control" name="name" id="name" th:value="${user.name}">
              </div>
              <div class="form-group">
                  <label for="pwd">Password:</label>
                  <input type="text" class="form-control" name="pwd" id="pwd" th:value="${user.password}">
              </div>
              <div class="form-group">
                  <label for="role">role:</label>
                  <select class="form-control" name="role" id="role" th:value="${user.role}">
                      <option th:selected="${user.role=='admin'}" value="admin" >admin</option>
                      <option th:selected="${user.role=='user'}" value="user" >user</option>
                  </select>
              </div>
          </form>
      </div>
      <script >
          function isBlank(str){
              if(str==""|| str == null || str == undefined){
                  return true;
              }else {
                  return false;
              }
          }
          $("#modify" ).click(function(){
              var id = $("#id").val();
              var name = $("#name").val();
              var password = $("#pwd").val();
              var role = $(" #role").val();
              if(isBlank(name) || isBlank(password)||isBlank(role)){
                  window.confirm("请完善信息");
              }else {
                  var param = {
                      "id": id,
                      "name": name,
                      "password": password,
                      "role": role
                  };
                  $.ajax({
                      url: "/modifyUser", //请求url
                      data: param, //请求参数
                      async: true, //是否异步
                      success: function f(result) {
                          window.confirm(result.msg); //修改用户信息成功提示框
                          location.href = "users";//重新加载界面， 同步数据库信息
                      }
                  });
              }
          });
      </script>
</body>
</html>